﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="WebTest.Test1" %>

<%@ Register assembly="GrayParrot.Web.Controls" namespace="GrayParrot.Web.Controls" tagprefix="cc1" %>

<%@ Register assembly="GrayParrot.Web.Controls" namespace="GrayParrot.Web.Controls.Datatables.Filters.QueryBuilder.DateValidation" tagprefix="cc2" %>
<%@ Register assembly="GrayParrot.Web.Controls" namespace="GrayParrot.Web.Controls.Datatables.Filters.QueryBuilder.TextValidation" tagprefix="cc3" %>
<%@ Register assembly="GrayParrot.Web.Controls" namespace="GrayParrot.Web.Controls.Datatables.Filters.QueryBuilder.NumberValidation" tagprefix="cc4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

<%--    <script type="text/javascript" lang="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" lang="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>--%>

    <asp:PlaceHolder ID="PlaceHolder1" runat="server">   
        <%: System.Web.Optimization.Scripts.Render("~/bundles/JQuery") %>          
        <%: System.Web.Optimization.Scripts.Render("~/bundles/JQueryUI") %>  
                     
        <%: System.Web.Optimization.Styles.Render("~/bundles/Datatables/css") %>
        <%: System.Web.Optimization.Scripts.Render("~/bundles/Datatables") %>

<%--        <%: System.Web.Optimization.Styles.Render("~/bundles/Formly/css") %>
        <%: System.Web.Optimization.Scripts.Render("~/bundles/Formly") %>--%>
    </asp:PlaceHolder>

    <link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap-themes.css" />
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
    
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.Core.js"></script> 
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.DataTables.js"></script> 
    <script type="text/javascript" lang="javascript" src="../Scripts/GrayParrot.Modals.js"></script> 

    <script type="text/javascript" src="/assets/plugins/bootstrap/bootstrap.min.js"></script>

    <script type="text/javascript" src="/../Scripts/QueryBuilderHelper.js"></script>

    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
        

    <style>
        .externaly_triggered_wrapper {
            width: 600px;
            display: inline-block;
            margin-bottom: 50px;
        }

        .input-group .select2-container {
            position: relative;
            z-index: 2;
            float: left;
            width: 100%;
            margin-bottom: 0;
            display: table;
            table-layout: fixed;
        }

       /*#builder_JQDTable_rule_0 .selectize-control.single .selectize-input
       {
           width: 250px;
       }
       #builder_JQDTable_rule_2 .selectize-control.single .selectize-input
       {
           width: 550px;
       }
       .selectize-control.single .selectize-input
       {
           width: 150px;
       }*/
       /*.selectize-control.single .selectize-input input {
           cursor: pointer;
           width: 250px;
       }*/
    </style>
</head>
<body>

    <div>

<%--    <select id="select2">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </select>--%>
        <% HttpContext.Current.Response.Write(this.JQDTable.RenderExternalFilters()); %>

<%--        <div id="builder_JQDTable" style="width:1500px">
            <input type="button" value="Filter" onclick="GetSQL()" />
        </div>--%>

        <%--<input type="button" value="Filter" onclick="GetSQL()" />--%>
        <br />

              <div id="testSelectize" style="width:1200px"></div>

              <cc1:JQDataTable ID="JQDTable" runat="server" 
                     SelectionMode="Single" 
                     RenderScripts="false" 
                     BootstrapClasses="table table-hover table-bordered ">
                    <FeaturesConfig>
                        <Features>
                            <cc1:Searching Value="QueryBuilder" ExternalFilters="false">
                                <QueryBuilderFilters>
<%--                                    <cc1:QBSelectColumnFilter ColumnName="CompanyName" 
                                        IDProp="value" TextProp="name" 
                                        Url="/api/Customers/LoadCompanies" 
                                        Preload="true" Width="200" />

                                    <cc1:QBSelectColumnFilter ColumnName="FirstName" 
                                        IDProp="value" TextProp="name" 
                                        Url="/api/Customers/LoadCompanies" 
                                        Preload="true" Width="200" />

                                    <cc1:QBDateTimeColumnFilter ColumnName="DateTime" DateFormat="DD/MM/YYYY hh:mm:ss" QueryBuilderDateDataType="Datetime" ShowInLine="true" />
                                    <cc1:QBDateTimeColumnFilter ColumnName="Date" DateFormat="DD/MM/YYYY" QueryBuilderDateDataType="Date" />
                                    <cc1:QBDateTimeColumnFilter ColumnName="Time" DateFormat="hh:mm" QueryBuilderDateDataType="Time" />
                                    <cc1:QBCheckBoxColumnFilter ColumnName="CheckBox" Url="/api/Customers/GetRegions"  /> 
                                    <cc1:QBRadioColumnFilter ColumnName="Radio" Url="/api/Customers/GetRegions"  /> --%>

<%--                                    <cc1:QBDateTimeColumnFilter ColumnName="Date" DateFormat="DD/MM/YYYY" DateDataType="Date">
                                        <Validation >
                                            <cc2:Min AllowEmpty="false" Message="Minimo mancante" />
                                        </Validation>
                                    </cc1:QBDateTimeColumnFilter>--%>

                                    <cc1:QBTextColumnFilter ColumnName="Nome" Max="10" Min="2" Width="1500">
                                        <Validation>
                                            <Settings>
                                                <cc3:Min AllowEmpty="false" Message="Min richiesto" />
                                                <cc3:Max AllowEmpty="false" Message="Max richiesto" />
                                            </Settings>
                                        </Validation> 
                                    </cc1:QBTextColumnFilter>

                                    <cc1:QBNumberColumnFilter ColumnName="Numero" Min="2" Max="10" Step="2">
                                        <Validation>
                                            <Settings>
                                                <cc4:Max AllowEmpty="false" Message="Max richiesto" />
                                                <cc4:Min AllowEmpty="false" Message="Min richiesto" />
                                                <cc4:Step AllowEmpty="false" Message="Step richiesto" />                                               
                                            </Settings>
                                        </Validation>
                                    </cc1:QBNumberColumnFilter >
                                    
                                </QueryBuilderFilters>
                                <Filters>
                                    <cc1:ColumnFilter ColumnName="FirstName" Type="Text"  />
                                    <cc1:ColumnFilter ColumnName="LastName" Type="Text" />
                                    <cc1:ColumnFilter ColumnName="Title" Type="Text" />
                                    <cc1:DateColumnFilter ColumnName="BirthDate" DateFormat="dd/mm/yyyy hh:mm:ss" IsRange="false" />
                                    <cc1:CustomChoiceFilter ColumnName="PostalCode" DefaultLabel="Postal Code" FilterDefaultLabel="seleziona..." >
                                        <Data>
                                            <cc1:DataItem name="Siaa" value="true" IsDefault="true" />
                                            <cc1:DataItem name="Noaa" value="false" />
                                        </Data>
                                    </cc1:CustomChoiceFilter>
                                    
                                    <cc1:SelectColumnFilter ColumnName="CompanyName" 
                                        SelectType="Simple" Url="/api/Customers/LoadCompanies"
                                        IdProp="value" TextProp="name" Width="500"
                                        MinimumInputLength="2"/>
                                 <%--   EnablePagination="true" PageSize="20" Width="450"--%>
                                </Filters>
                            </cc1:Searching>
                            <cc1:AutoWitdh Value="true" />
                            <cc1:ScrollY Value="500" ScrollCollapse="true" />
                            <cc1:LengthChange Value="true" />
                            <cc1:Paging PagingType="FullNumbers" PageLength="20" />
                        </Features>
                    </FeaturesConfig>
                    <ControllerConfig Url="/api/Employee/Load" LoadingMode="OnLoad">
                        <ControllerParameters>
                            <cc1:ControllerParameter />
                        </ControllerParameters>
                    </ControllerConfig>
                    <ColumnsConfig Key="EmployeeId">
                        <Columns>
                            <cc1:TextColumn Name="EmployeeId" Header="Id" Visible="true" />
                            <cc1:TextColumn Name="FirstName" Header="First Name" />
                            <cc1:TextColumn Name="LastName" Header="Last Name" />
                            <cc1:TextColumn Name="Title" Header="Title" DefaultContent="cc" />
                            <cc1:DateColumn Name="BirthDate" Header="Birth Date" />
                            <cc1:TextColumn Name="PostalCode" Header="Postal Code" />
                            <cc1:TextColumn Name="CompanyName" Header="Company Name" Visible="false" />
                            <cc1:ActionColumn>
                                <Actions>
                                    <cc1:ActionButton Text="Prova" Callback="SayHello" />
                                    <cc1:ActionLink Text="Vai" Callback="SayHello2" />
                                    <cc1:ActionIcon Icon="fa fa-pencil" Callback="SayHello" Class="pencil" />

                                    <%-- <cc1:ActionIcon Icon="fa fa-pencil" Callback="SayHello" />--%>
<%--                                    <cc1:ActionIcon Icon="fa fa-search" Callback="SayHello" Class="search" />
                                    <cc1:ActionIcon Icon="fa fa-pencil" Callback="SayHello2" Class="pencil" />--%>
                                </Actions>
                            </cc1:ActionColumn>
                        </Columns>
                    </ColumnsConfig>
                    <Toolbar>
                        <cc1:IconButton Icon="fa-plus" Callback="LoadAddDialog" />
                        <cc1:IconButton Icon="fa-edit" Callback="LoadAddDialog" />
                        <cc1:IconButton Icon="fa-minus" Callback="LoadAddDialog" />
                        <cc1:IconButton Icon="fa-trash-o" Callback="SayHello" />
                    </Toolbar>
                    <Buttons>
<%--                        <cc1:CrudAddButton Text="Aggiungi" Callback="LoadAddDialog" />
                        <cc1:CrudEditButton Text="Modifica" Callback="LoadEditDialog" />
                        <cc1:CrudDeleteButton Text="Cancella" Callback="DeleteDialog" />--%>
                        <cc1:UtilityButton Text="XLS" Type="ExportToExcel" Title="Cronologia" />
                    </Buttons>
                </cc1:JQDataTable>

        <br />

        
        <div id="caricamento" />
        <iframe id="pippo2" src="" style="width:100%; height:inherit;border:none"></iframe>
    </div>


<%--    <% HttpContext.Current.Response.Write(this.JQDTable.RenderScriptsManually(false)); %>--%>

</body>

    <script>
        <% HttpContext.Current.Response.Write(this.JQDTable.RenderScriptsManually(false, false)); %>

        $(document).ready(function () {

            //$('.dropdown-menu .selectize-control').css('min-width', '250px');
            //$(".selectize-input input[placeholder]").attr("style", "width: 100%;");

            //$(".selectize-control.single .selectize-input").css('width', '200px');

            //.dropdown-menu .selectize-control {
            //    margin: 5px 10px 0;
            //    width: 350px;
            //}

            //$('#builder_JQDTable').on('beforeAddRule.queryBuilder', function (e, rule) {
            //    var theInput = rule.$el.find('.rule-value-container input');
            //    // your logic to resize theInput
            //    theInput.attr('size', 200);
            //});

            $('#testSelectize').queryBuilder({
                plugins: ['bt-tooltip-errors'],
                filters: [{
                    id: 'date',
                    label: 'datetimepicker',
                    type: 'datetime',
                    plugin: 'datetimepicker',
                    plugin_config: {
                        viewMode: 'days',
                        showClose: true,
                        format: 'DD/MM/YYYY'
                    }
                }]
            });

            //$('#testSelectize').selectize({
            //    valueField: 'value',
            //    labelField: 'name',
            //    searchField: 'name',
            //    sortField: 'name',
            //    preload: true,
            //    create: false,
            //    maxItems: 1,
            //    plugins: ['remove_button'],
            //    load: function (query, callback) {
            //        //if (!query.length) return callback();
            //        $.ajax({
            //            url: '/api/Customers/LoadCompanies', type: 'GET',
            //            dataType: 'json',
            //            error: function () {
            //                callback();
            //            },
            //            success: function (res) {
            //                callback(res);
            //            }
            //        });
            //    }
            //});


            //$('#caricamento').load('webform2.aspx?id=100');

            //$('#pippo2').load(function () {
            //    var iFrame = document.getElementById('pippo2');
            //    resizeIFrameToFitContent(iFrame);
            //});


            //$('#pippo2').attr('src', 'webform2.aspx?id=100');
            


            //InitQueryBuilder('builder');
           

            //YacfBootstrapTweaks();

            //$('#externaly_triggered_wrapper_JQDTable').addClass('externaly_triggered_wrapper');

            // BOOTSTRAP: Tweaks
            $('.yadcf-filter-wrapper').addClass('input-group');
            $('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm');
            $('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>');


            //$('#select2').select2({
            //    minimumResultsForSearch: 2, //Infinity,
            //    width: 300,
            //    //id: 'value',
            //    //formatSelection: function (item) { { alert('1'); return item.name; } },
            //    //formatResult: function (item) {{ return item.name; }},
            //    ajax: {
            //        url: "/api/Customers/LoadCompanies",
            //        dataType: 'json',
            //        type: "POST",
            //        params: { contentType: 'application/json; charset=utf-8' },
            //        data: function (params) {
            //            //params.page = params.page || 1;

            //            return {
            //                searchTerm: params.term
            //                //,pageSize: 30
            //                //,pageNumber: params.page
            //            };

            //        },
            //        processResults: function (data, params) {
            //            //params.page = params.page || 1;

            //            return {
            //                results: $.map(data.Results, function (item) {

            //                    var obj = {
            //                        text: item.name,
            //                        id: item.value
            //                    };

            //                    return obj;
            //                })
            //                //,pagination: {
            //                //    more: (params.page * 30) < data.Total
            //                //}
            //            };
            //        }
            //    }
            //});
        });

        function CaricaDati() {
            var data = null;

            $.ajax({
                type: 'GET',
                url: '/api/Customers/LoadCompanies',
                //data: JSON.stringify(dataJSON),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    return response;
                }
            });

            return data;
        }

        function resizeIFrameToFitContent(iFrame) {

            iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
            iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
        }

        function GetSQL() {
            //var result = $('#builder_m_tableJQDTable').queryBuilder('getSQL');

            // Set dynamic parameters for the data table
            //m_tableJQDTable.data('dt_params', { QueryBuilder: $('#builder_JQDTable').queryBuilder('getSQL') });

            RedrawGrid(m_tableJQDTable);
            //var pp = m_tableJQDTable.data;

            //alert(pp);
        }

        function LoadData() {
            $.ajax({
                type: 'POST',
                url: '/api/Customers/LoadCompanies',
                //data: JSON.stringify(dataJSON),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    alert(response);
                }
            });
        }

        function SayHello() {

            var row = GetSelectedData(m_tableJQDTable);

            if (row !== undefined) {
                alert(row.FirstName); //obj.FirstName);
            } else {
                alert('seleziona una riga...'); //obj.FirstName);
            }

        }

        function SayHello2(obj) {

            alert(obj.FirstName);

        }
    </script>
</html>
